<template>
 <el-main>
  <h6>{{ ruleForm.coinCode }} {{ $t('user.withdrawal.withdrawal') }}</h6>

  <el-form :model="ruleForm" ref="ruleForm" @keyup.enter.native="submit" label-position="top" class="demo-ruleForm">
   <el-form-item :label="t1" prop="amount">
    <el-input v-model="ruleForm.amount" :placeholder="t2"></el-input>

    <a @click="balance">{{ $t('user.common.all') }}</a>
   </el-form-item>

   <el-form-item :label="$t('user.withdrawal.form.address')" prop="erc20Address">
    <el-input v-model="ruleForm.erc20Address" :placeholder="$t('user.withdrawal.form.prop1')"></el-input>
   </el-form-item>

   <el-form-item :label="$t('user.withdrawal.form.username')">
    <el-input v-model="ruleForm.username" disabled="disabled" :placeholder="$t('common.error.t7')"></el-input>
   </el-form-item>

   <el-form-item :label="$t('user.withdrawal.form.code')" prop="smsCode">
    <el-input v-model="ruleForm.smsCode" :placeholder="$t('user.withdrawal.form.prop3')"></el-input>

    <a @click="send" :class="is_send ? 'cursor' : ''">{{ code }}</a>
   </el-form-item>

   <el-form-item :label="$t('user.withdrawal.form.password')" prop="password">
    <el-input v-model="ruleForm.password" type="password" :placeholder="$t('user.withdrawal.form.prop4')"></el-input>
   </el-form-item>

   <el-button type="primary" @click="submit">{{ $t('user.withdrawal.withdrawal') }}</el-button>
  </el-form>
 </el-main>
</template>

<script>
export default {
 name: "Form",
 props:['active', 'tabs'],
 data: () => ({
  ruleForm: {
   coinCode: '',
   erc20Address: '',
   password: '',
   username: '',
   smsCode: '',
   amount: '',
   key: '',
   type: 1
  },

  t: 60,
  code: 'Get Verification Code',
  is_send: false,

  min: '',
  max: '',
  avalibleBalance: '',

  isEmail: /^[\w\-\.]+@[a-z0-9]+(\-[a-z0-9]+)?(\.[a-z0-9]+(\-[a-z0-9]+)?)*\.[a-z]{2,4}$/i,

  t1: '',
  t2: ''
 }),
 created() {
  this.code = this.$t('common.tips.t6')

  this.ruleForm.username = this.$store.getters.getInfo.nickName
  this.ruleForm.coinCode = this.active
  // 初选BTC时
  this.tabs.forEach(item => {
   if (item.coinCode === this.active) {
    this.min = item.minPayAmount
    this.max = item.maxPayAmount
    this.avalibleBalance = item.avalibleBalance
   }
  })
 },
 methods: {

  // 自动输入全部余额
  balance() {
   this.ruleForm.amount = this.avalibleBalance
  },

  // 发送验证码
  send () {
   let _this = this;
   if (this.isEmail.test(this.ruleForm.username)) {
    if (_this.t === 60 && !_this.is_send) {
     this.$send({
      data: {
       "phone": this.ruleForm.username
      }
     }).then(res => {
      this.ruleForm.key = res.data
      _this.code = _this.t + 's'
      _this.is_send = true

      const time = setInterval(() => {
       if (_this.t === 1) {
        clearInterval(time)
        _this.t = 60
        _this.code = this.$t('common.tips.t6')
        _this.is_send = false
       } else {
        _this.t--;
        _this.code = _this.t + 's';
       }
      }, 1000)
     })
    }
   } else {
    if (this.ruleForm.phone === '') {
     this.$message.error(this.$t('common.error.t1'))
    } else {
     if (!this.isEmail.test(this.ruleForm.phone)) {
      this.$message.error(this.$t('common.error.t2'))
     }
    }
   }
  },

  // 提交
  submit() {
   if (this.ruleForm.amount === '') {
    this.$message.error(this.$t('common.error.t10'))
   } else {
    if (this.ruleForm.amount < this.min || this.ruleForm.amount > this.max) {
     this.$message.error(this.$t('common.error.t11') + this.min + '-' + this.max)
    } else {
     if (this.ruleForm.erc20Address === '') {
      this.$message.error(this.$t('common.error.t12'))
     } else {
      if (this.ruleForm.smsCode === '') {
       this.$message.error(this.$t('user.withdrawal.form.prop3'))
      } else {
       if (this.ruleForm.password === '') {
        this.$message.error(this.$t('common.error.t13'))
       } else {
        this.$post(this.$address.cashout, {
         data: this.ruleForm
        }).then(res => {
         if (res.code === 1) {
          this.$refs.ruleForm.resetFields();
          this.ruleForm.key = ''
         }
        })
       }
      }
     }
    }
   }
  }
 },
 watch: {
  active (a, b) {
   this.ruleForm.coinCode = a;
   this.$refs.ruleForm.resetFields();
   this.ruleForm.key = ''
   this.tabs.forEach(item => {
    if (item.coinCode === a) {
     this.min = item.minPayAmount
     this.max = item.maxPayAmount
     this.avalibleBalance = item.avalibleBalance
     this.t1 = this.$t('user.withdrawal.form.max').replace("' + min + '-' + max + ' ' + ruleForm.coinCode + '", this.min + '-' + this.max + ' ' + this.ruleForm.coinCode)
     this.t2 = this.$t('user.withdrawal.form.balance').replace("' + avalibleBalance + '", this.avalibleBalance)
    }
   })
  },
  '$i18n.locale'(a, b) {
   this.t1 = this.$t('user.withdrawal.form.max').replace("' + min + '-' + max + ' ' + ruleForm.coinCode + '", this.min + '-' + this.max + ' ' + this.ruleForm.coinCode)
   this.t2 = this.$t('user.withdrawal.form.balance').replace("' + avalibleBalance + '", this.avalibleBalance)
  }
 }
}
</script>

<style scoped lang="scss">
.el-main {
 display: flex;
 flex-direction: column;

 >h6 {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 30px;
 }

 .el-form {
  width: 50%;

  /deep/ .el-form-item {

   .el-form-item__label {
    padding-bottom: 0;
    cursor: auto;
   }
   .el-form-item__content {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    border: 1px solid #DCDFE6;
    border-radius: 4px;

    .el-input {
     width: 1%;
     flex: 1 1 auto;
     input{
      font-weight: bold;
      font-size: 18px;
      height: 51px;
      cursor: pointer;
      border: none;
      padding-right: 0;
      color: #000;
     }
    }

    a{
     padding: 0 5px;
     font-weight: bold;
     text-decoration: underline;
    }
   }
  }

  .el-button {
   width: 100%;
   height: 55px;
   border: 1px solid #396FB5;
   background: #396FB5;
   border-radius: 10px;
   margin-top: 50px;
  }
 }
}
</style>
